import React from 'react'
import {
    View,
    FlatList,
    StyleSheet
} from 'react-native'

import CommunityTabCell from './CommunityTabCell'

export default class CommunityTabView extends React.Component {

    state = {
        highlightTitle:this.props.defaultTab ? this.props.defaultTab : this.props.dataList[0]
    }

    render() {
        return (
            <View >
                <FlatList
                    extraData={this.state}
                    data={this.props.dataList}
                    keyExtractor={this.keyExtractor}
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                    renderItem={this.renderItem.bind(this)}
                    alwaysBounceHorizontal={false}
                    extraData={this.state}
                />
                <View style={styles.line} />
            </View>
        )
    }

    keyExtractor = (item, index) => '' + index

    renderItem({ item }) {
        return (
            <CommunityTabCell 
                title={item}
                highlightTitle={this.state.highlightTitle}
                action={this.clickCellAction.bind(this)}
            />
        )
    }

    clickCellAction(item){
        this.setState({
            highlightTitle: item
        })
        this.props.action(item)
    }
}

const styles = StyleSheet.create({
    line: {
        marginBottom: 0,
        marginLeft: 0,
        marginRight: 0,
        height: 0.5,
        backgroundColor: '#eeeeee'
    },
})